<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
	*{
		padding: 0;
		margin: 0;
	}
	body{
		background: #F9F9F9;
	}
	#meituan{
		width: 314px;
		height: 348px;
		border: 1px solid blue;
		background: white;
		margin: 30px auto;
		position: relative;
	}
	#meituan .jiudian{
		width: 314px;
		height: 192px;
	}
	#meituan .title{
		position: absolute;
		top: 205px;
		left: 10px;
		color: #333;
		font-size: 16px;
		font-weight: 700;
		text-decoration: none;
		line-height: 22px;
	}
	#meituan .description{
		position: absolute;
		top: 231px;
		left: 16px;
		color: #999;
		font-size: 14px;
		text-decoration: none;
		line-height: 22px;
	}
	#meituan .now_price{
		position: absolute;
		top: 281px;
		left: 16px;
		color: #F76120;
		font-size: 22px;
		font-family: arial,sans-serif;
		font-weight: 700;
	}
	#meituan .now_price span{
		font-size: 14px;
		font-weight: 400;
		padding-right: 2px;
	}
	#meituan .old_price{
		top: 287px;
		left: 63px;
		position: absolute;
		font-size: 12px;
		color: #999;
	}
	#meituan .old_price span{
		text-decoration: line-through;
		padding-left: 7px;
		font-family: arial,sans-serif;
	}
</style>
</head>

<body>

<div id="meituan">
	<img src="jiudian.jpg" class="jiudian" />
	<a href="" class="title">【19店通用】青年餐厅</a>
	<a href="" class="description">代金券1张，可叠加使用，食尚在青年</a>
	<p class="now_price"><span>¥</span>68</p>
	<p class="old_price">门店价<span>¥80</span></p>
</div>

</body>
</html>
